<template>
	<div id="Attention">
		<top></top>
		<div class="main">
			<div class="list-wrap">
				<ul style="overflow: hidden;background: #fff;margin-top: 0.2rem" v-if="followList == ''">
					<div class="no-data">
						<img src="../../assets/images/home/nodata.png" />
					</div>
				</ul>
				<ul v-else>
					<li v-for="(item,index) in followList">
						<router-link :to="'/Detail/id/' + item.auction_id">
							<div class="title-bar">
								<img :src="'./static/data/'+item.shop_logo" alt="" />
								<div class="info">
									<p class="name">{{item.shop_name}}<span class="level"><i class="icon-level"></i><label id="label">{{item.shop_score}}</label>分</span></p>
									<p class="addTime">{{timer2time(item.add_time)}}</p>
								</div>
							</div>
							<div class="img-wrap">
								<div class="bg-img">
									<img :src="'./static/data/' + item.goods_img " />
								</div>
								<div class="zhe">
									<div class="title">
										{{item.goods_name}}
									</div>
								</div>
							</div>
							<div class="desc">
								<p class="price">当前价: <span>￥{{item.auction_bidprice}}</span></p>
								<p class="num">出价次数: <span>{{item.bidding_count}}次</span></p>
								<count-down :currentTime="cur_time" :startTime="item.auction_starttime" :endTime="item.auction_endtime" :tipText="'距开始'" :tipTextEnd="'距结束'" :endText="'已结束'" :dayTxt="'天'" :hourTxt="'时'" :minutesTxt="'分'" :secondsTxt="'秒'"></count-down>
							</div>
						</router-link>
					</li>
				</ul>

      </div>
      <div v-if="followList == ''" class="selling">
        <h2 class="recShop">为您推荐</h2>
        <ul v-if="recList == ''" style="overflow: hidden;">
          <div class="no-dataon">
            <img src="../../assets/images/home/nodata.png"/>
          </div>
        </ul>
        <ul class="list" style="overflow: hidden;">
          <li v-for="(item,index) in recList" :key="index">
            <img class="list_bg" :src="'/los' + item.goods_thumb" alt=""/>
            <div class="Info">
              <!--<span>拍卖中</span>-->
              <p>
                <count-down v-if="cache" :currentTime="cur_times" :startTime="item.seckill_starttime"
                            :endTime="item.seckill_endtime" :tipText="'距开始'" :tipTextEnd="'距结束'" :endText="'已结束'"
                            :dayTxt="':'" :hourTxt="':'" :minutesTxt="':'" :secondsTxt="''">
                </count-down>
              </p>
            </div>
            <div class="desc">
              <p class="title">{{item.goods_name}}</p>
              <p class="price"><span>当前价</span><b>￥{{item.seckill_price}}</b></p>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <bottom></bottom>
    <loading :show="show1" :text="text"></loading>
    <toast v-model="success" type="text" width="2.8rem">{{msg}}</toast>
  </div>
</template>

<script>
import top from '../comp/Header';
import bottom from '../comp/Footer';
import { ViewBox, Loading, Toast } from 'vux';
import { followShopInfo } from '@/api/service'
import CountDown from 'vue2-countdown';
import BScroll from 'better-scroll';
import $ from 'jquery';
import axios from 'axios';

export default {
  data() {
    return {
      show1: false,
      text: '加载中',
      followList: [],
      cur_time: '',
      cur_times: '',
      flag: true,
      startTime: '',
      add_time: '',
      recList: [],
      cache: true,
      success: false,
      msg: ''
    }
  },
  components: {
    top,
    bottom,
    ViewBox,
    CountDown,
    BScroll,
    Loading,
    Toast
  },
  created() {
    //将时间戳转换成日期的封装函数
    Date.prototype.Format = function (fmt) {
      var o = {
        "M+": this.getMonth() + 1,
        "d+": this.getDate(),
        "h+": this.getHours(),
        "m+": this.getMinutes(),
        "s+": this.getSeconds(),
        "q+": Math.floor((this.getMonth() + 3) / 3),
        "S": this.getMilliseconds()
      };
      if (/(y+)/.test(fmt))
        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
      for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt))
          fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
      return fmt;
    }
  },
  activated() {
    this.getFollowShopInfo();
    this.getRecInfo();
  },
  methods: {
    //推荐信息显示
    getRecInfo: function () {
      this.$http({
        method: 'GET',
        url: '/los/api/seckill/goods_list.json',
        data: ''
      }).then((result) => {
        console.log(result);
        if (result.data.code == 1) {
          this.recList = result.data.list.data;
          this.cur_times = result.data.cur_time;
        } else {
          this.recList = '';
        }

      }).catch((err) => {
        console.log(err);
      })

    },

    //关注列表
    getFollowShopInfo () {
      followShopInfo().then(result=>{
        if(result.code === 1){
          this.followList = result.rows
          this.cur_time = result.cur_time
        }
      })
      let _this = this;
      let more = true;
      var page = 1;
      // this.$http({
      //   method: 'GET',
      //   url: '/los/api/member/follow_shop_list.json',
      //   data: ''
      // }).then((result) => {
      //   console.log(result);
      //   this.followList = result.data.list;
      //   this.cur_time = result.data.cur_time;
      // }).catch((err) => {
      //   console.log(err);
      // })
      $(window).scroll(function () {
        var htmlHeight = $(document).height();
        var clientHeight = $(window).height();
        var scrollTop = $(document).scrollTop();
        var overHeight = scrollTop + clientHeight;
        if (overHeight >= htmlHeight * 0.9) {
          if (more == true) {
            more = false;
            page += 1;
            axios.get('/los/api/member/follow_shop_list.json?page=' + page).then(function (result) {
              $.each(result.data.list, function (index, val) {
                _this.followList.push(val);
              });
              more = true;
              if (result.data.page >= result.data.pagecount) {
                more = false;
              }
            }).catch(function (error) {
              console.log(error);
            });
          }
        }
      })
    },
    //将时间戳转换成日期
    timer2time: function (time) {
      return new Date(parseInt(time) * 1000).Format("yyyy-MM-dd hh:mm:ss");
    },
  }
}
</script>

<style scoped>
  .main {
    width: 100%;
    margin-bottom: 1.6rem;
  }

  .list-wrap .no-data {
    width: 2.96rem;
    height: 2.96rem;
    margin: 1rem auto;
  }

  .list-wrap .no-data img {
    width: 100%;
  }

  .list-wrap .no-data .desc {
    margin-top: 0.4rem;
    text-align: center;
    font-size: 0.4rem;
    color: #aaa;
  }

  .main .list-wrap ul li {
    background: #fff;
    padding: 0 0.26rem;
    margin-top: 0.26rem;
  }

  .main .list-wrap ul li .title-bar {
    width: 100%;
    height: 1.62rem;
    overflow: hidden;
    padding: 0.26rem 0;
  }

  .list-wrap ul li .title-bar img {
    float: left;
    width: 1.09rem;
    height: 1.09rem;
    border-radius: 50%;
    object-fit: contain;
  }

  .list-wrap ul li .title-bar .info {
    float: left;
    margin-left: 0.21rem;
  }

  .list-wrap ul li .title-bar .info .name {
    font-size: 0.37rem;
    color: #333;
  }

  .list-wrap ul li .title-bar .info .level {
    margin-left: 0.26rem;
    color: #d58e26;
    font-size: 0.29rem;
  }

  .list-wrap ul li .title-bar .info .level label {
    padding-left: 0.08rem;
    font-size: 0.29333rem;
  }

  .list-wrap ul li .title-bar .info .addTime {
    font-size: 0.29rem;
    color: #aaa;
    line-height: 1;
    margin-top: 0.26rem;
  }

  .list-wrap ul li .img-wrap {
    width: 100%;
    position: relative;
  }

  .list-wrap ul li .img-wrap .bg-img {
    width: 9.46rem;
    height: 5.3rem;
  }

  .list-wrap ul li .img-wrap .bg-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .list-wrap ul li .img-wrap .zhe {
    width: 9.46rem;
    height: 5.3rem;
    position: absolute;
    top: 0;
    overflow: hidden;
  }

  .list-wrap ul li .img-wrap .zhe span {
    background: #da4240;
    width: 1.41rem;
    height: 0.56rem;
    color: #fff;
    display: block;
    line-height: 0.51rem;
    font-size: 0.34rem;
    float: right;
    text-align: center;
    margin-right: 0.42rem;
  }

  /*增加的*/

  .list-wrap ul li .img-wrap .zhe .title {
    position: absolute;
    bottom: 0;
    line-height: 1.06rem;
    height: 1.06rem;
    color: #fff;
    font-size: 0.34rem;
    background: rgba(0, 0, 0, .3);
    /*background:linear-gradient();*/
    padding: 0 0.26rem;
    width: 100%;
  }

  .list-wrap ul li .desc {
    width: 100%;
    height: 1.78rem;
    overflow: hidden;
    line-height: 0.6rem;
    font-size: 0.37rem;
    color: #777;
    padding-top: 0.26rem;
  }

  .list-wrap ul li .desc .price {
    float: left;
    width: 50%;
    font-size: 0.34rem;
  }

  .list-wrap ul li .desc .price span {
    color: #da4240;
  }

  .list-wrap ul li .desc .num {
    float: right;
    width: 50%;
    text-align: right;
  }

  .list-wrap ul li .desc .num span {
    font-size: 0.34rem;
    color: #333;
  }

  .list-wrap ul li .desc .timer {
    width: 100%;
  }

  .list-wrap ul li .desc .timer i {
    font-style: normal;
    font-size: 0.34rem;
    color: #333;
  }

  /*推荐列表*/

  .selling {
    width: 100%;
  }

  .selling .recShop {
    width: 100%;
    height: 1.3rem;
    line-height: 1.3rem;
    background: #fff;
    position: relative;
    font-size: 0.42rem;
    padding: 0 0.26rem;
    margin-top: 0.26rem;
  }

  .selling .recShop:before {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 1px;
    border-top: 1px solid #e6e6e6;
    color: #e6e6e6;
    transform-origin: 0 0;
    transform: scaleY(0.5);
  }

  .selling .recShop:after {
    content: " ";
    position: absolute;
    left: 0;
    top: 1.3rem;
    right: 0;
    height: 1px;
    border-bottom: 1px solid #e6e6e6;
    color: #e6e6e6;
    transform-origin: 0 0;
    transform: scaleY(0.5);
  }

  .selling ul {
    width: 100%;
    padding: 0.26rem;
    overflow: hidden;
    background: #fff;
  }

  .selling ul li {
    position: relative;
    float: left;
    width: 4.61rem;
    margin-bottom: 0.26rem;
  }

  .selling ul li:nth-child(even) {
    margin-left: 0.18rem;
  }

  .selling ul li .list_bg {
    width: 4.61rem;
    height: 2.96rem;
  }

  .selling ul li .Info {
    width: 100%;
    position: absolute;
    top: 0;
    width: 100%;
    height: 2.96rem;
  }

  .selling ul li .Info > span {
    /*拍卖中*/
    background: #da4240;
    /*预展中*/
    /*background: #0cab9a;*/
    /*流拍  已失败*/
    /*background: #aaa;*/
    /*已结拍*/
    /*background: #d16d14;*/
    color: #fff;
    width: 1.41rem;
    height: 0.53rem;
    font-size: 0.32rem;
    margin-left: 0.26rem;
    display: inline-block;
    line-height: 0.53rem;
    text-align: center;
    border-bottom-left-radius: 0.1rem;
    border-bottom-right-radius: 0.1rem;
  }

  .selling ul li .Info p {
    position: absolute;
    bottom: 0;
    line-height: 0.66rem;
    height: 0.66rem;
    width: 100%;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.3);
  }

  .selling .count-down {
    color: #fff;
    height: 0.53rem;
    margin-left: 0.26rem;
  }

  .selling ul li .desc {
    width: 100%;
    border: solid 1px #e6e6e6;
    border-top: none;
    padding-left: 0.21rem;
  }

  .selling ul li .desc .title {
    width: 100%;
    overflow: hidden;
    font-size: 0.34rem;
    padding-top: 0.32rem;
    color: #333;
  }

  .selling ul li .desc .price {
    margin: 0.26rem 0;
  }

  .selling ul li .desc .price span {
    color: #aaa;
    font-size: 0.29rem;
  }

  .selling ul li .desc .price b {
    color: #cd302e;
    margin-left: 0.13rem;
    font-size: 0.34rem;
  }

  .no-dataon {
    width: 2.96rem;
    height: 2.96rem;
    margin: 1rem auto;
  }

  .no-dataon img {
    width: 100%;
  }

  .no-data img {
    width: 100%;
  }
</style>
